<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <meta name="applicable-device" content="mobile">
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="title" content="阴级板全生命周期管理系统" />
    <meta name="description" content="阴级板全生命周期管理系统" />
    <meta name="keywords" content="阴级板全生命周期管理系统" />
    <title>阴级板全生命周期管理系统</title>
    <link rel="stylesheet" href="stylesheet/style.css" type="text/css" media="all" />
    <link rel="stylesheet" href="stylesheet/style-m.css" type="text/css" media="all" />
    <link rel="stylesheet" href="plug/layui/css/layui.css" type="text/css" media="all"/>
    <link rel="stylesheet" href="stylesheet/animate.min.css" type="text/css" media="all" />
    <script language="javascript" type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/animate.min.js"></script>
    <script language="javascript" type="text/javascript" src="js/main.js"></script>
    <script language="javascript" type="text/javascript" src="plug/echarts/echarts.js"></script>
    <script language="javascript" type="text/javascript" src="plug/layui/layui.js"></script>
<!--打算使用Vue来做数据渲染-->
    <script language="javascript" type="text/javascript" src="plug/vue/vue.min.js"></script>
<!--    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">-->
    <style>
        body,
        html,
        #container {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }
    </style>
    <script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=NsiMq2o0Clstl9Ktz80HIuNLF7zI4qcV"></script>
</head>

<body>

<div class="toptitle">

    <span>阴级板全生命周期管理系统</span>
</div>
<div class="box-middle">
    <!--顶部菜单-->
<!--  2022/10/03:移除左上角与屏幕左侧的按钮（如关键核心技术、竞合分析、发展现状等）  -->
<!--    <div class="nav">
        <a href="#" class="cur">产业全景</a>
        <a href="#">关键核心技术</a>
        <a href="#">竞合分析</a>
        <a href="#">数字仿真</a>
        <a href="#">门户平台</a>
    </div>-->
    <!--左边菜单链接-->
<!--    <div class="leftnav">
        <a href="#">首页</a>
        <a href="#">发展现状</a>
        <a href="#">创新能力</a>
    </div>-->
    <!--选择日期-->
    <div id="date"><input type="text" name="date" id="test5" value="2022-06-15"><button>重置日期</button></div>
    <!--实时时间-->
    <div id="time"></div>
    <div class="fullscreen" id="fullScreen"></div>
    <div class="fullscreen" id="exitFullScreen"></div>
<script>
$(function(){
    //全屏
    $("#fullScreen").on("click",function(){
        fullScreen();
    })
    //退出全屏
    $("#exitFullScreen").on("click",function(){
        exitFullscreen();
    })
})

//fullScreen()和exitScreen()有多种实现方式，此处只使用了其中一种
//全屏
function fullScreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
    }
}

//退出全屏
function exitFullscreen() {
    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
}

//监听window是否全屏，并进行相应的操作,支持esc键退出
window.onresize = function() {
    var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen ||
        document.msFullscreenElement || document.fullscreenElement
    );//!document.webkitIsFullScreen都为true。因此用!!
    if (isFull==false) {
        $("#exitFullScreen").css("display","none");
        $("#fullScreen").css("display","block");
    }else{
        $("#exitFullScreen").css("display","block");
        $("#fullScreen").css("display","none");
    }
}

</script>
    <div class="con-left">
        <!--阴极铜产值-->
        <div class="cbox">
<!--     2022/10/03:阴极铜产值改成阴极铜产量       -->
            <div class="cbox-title"><span>阴极铜产量</span></div>
            <div class="cbox-con">
                <div class="kbox" id="container1"></div>
            </div>
        </div>
        <!--阴极板统计-->
        <div class="cbox">
            <div class="cbox-title"><span>阴极板统计</span></div>
<!--            <div class="cbox-con">-->
            <div  id="yjbtjtable" style="overflow:auto;">
                <table id="t_yjbtj" style="width:1900px;">
                    <thead>
                    <th></th>
                    <th>三门三友</th><th>铜陵有色金属集团股份有限公司金冠铜业分公司</th><th>赤峰云铜有色金属有限公司</th><th>赤峰金通铜业有限公司</th><th>广西南国铜业有限公司</th><th>浙江江铜富冶和鼎铜业有限公司</th><th>广西金川有色金属有限公司</th><th>中铜东南铜业有限公司</th><th>大冶有色金属有限责任公司</th><th>金隆铜业有限公司</th><th>葫芦岛宏跃北方铜业有限责任公司</th><th>河南中原黄金冶炼厂有限责任公司</th><th>河南豫光金铅股份有限公司</th><th>张家港联合铜业有限公司</th><th>青海铜业有限责任公司</th><th>中国十五冶金建设集团有限公司</th><th>金川集团铜业有限公司</th><th>黑龙江紫金铜业有限公司</th><th>江苏庆峰工程集团有限公司</th><th>北京兴源诚经贸发展有限公司</th><th>盛屯金属有限公司</th><th>河口明成技术贸易有限公司</th><th>紫金矿业物流有限公司</th>
                    </thead>
                    <tbody>
                    <tr>
                        <td>总板数</td>
                        <td>0</td>
                        <td>10000</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>120</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>5641</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>在线板数</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>维修板数</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td>备用板数</td>
                        <td>0</td>
                        <td>10000</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>120</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>0</td>
                        <td>5641</td>
                        <td>0</td>
                        <td>0</td>
                    </tr>
                    <tr>
                        <td colspan='23'>截止到今日</td>
                    </tr>
                    <tr>
                        <td>备用板数</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    <tr>
                        <td>备用板数</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                        <td>-</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!--中国地图-->

    <div class="con-center" style="margin:40px auto;">

        <div class="ktitle">2022年全国当天总铜产量分布</div>
        <div class="kbox">
<!--            <div id="chinamap" style="height: 100%"></div>-->
            <div id="container" style="height: 90%"></div>
        </div>

    </div>
    <div class="con-right">
        <!--机组剥片速度-->
        <div class="cbox">
            <div class="cbox-title"><span>机组剥片速度</span></div>
            <div class="cbox-con speed">
                <div class="kbox h260"><div id="container2" style="height: 100%"></div></div>
<!--                2022-10-08:增加滚动条以显示所有数据     -->
                <div  style="overflow:auto;">
                 <table class="m5">
                     <thead>
                         <th>剥片速度</th>
                         <th>奥炉车间</th>
                         <th>双闪车间</th>
                         <th>XX车间</th>
                         <th>XX车间</th>
                         <th>XX车间</th>
                     </thead>
                     <tbody>
                          <tr>
                             <td>7:00</td>
                             <td>0</td>
                             <td>0</td>
                             <td>0</td>
                             <td>0</td>
                             <td>0</td>
                         </tr>
                         <tr>
                             <td>8:00</td>
                             <td>250</td>
                             <td>300</td>
                             <td>200</td>
                             <td>230</td>
                             <td>240</td>
                         </tr>
                         <tr>
                             <td>9:00</td>
                             <td>500</td>
                             <td>500</td>
                             <td>400</td>
                             <td>350</td>
                             <td>420</td>
                         </tr>
                          <tr>
                             <td>10:00</td>
                             <td>550</td>
                             <td>600</td>
                             <td>500</td>
                             <td>245</td>
                             <td>430</td>
                         </tr>
                         <tr>
                             <td>11:00</td>
                             <td>330</td>
                             <td>340</td>
                             <td>500</td>
                             <td>348</td>
                             <td>320</td>
                         </tr>
                          <tr>
                             <td>12:00</td>
                             <td>485</td>
                             <td>453</td>
                             <td>427</td>
                             <td>420</td>
                             <td>210</td>
                         </tr>
                         <tr>
                             <td>13:00</td>
                             <td>456</td>
                             <td>542</td>
                             <td>538</td>
                             <td>436</td>
                             <td>330</td>
                         </tr>
                          <tr>
                             <td>14:00</td>
                             <td>248</td>
                             <td>472</td>
                             <td>330</td>
                             <td>350</td>
                             <td>410</td>
                         </tr>
                         <tr>
                             <td>15:00</td>
                             <td>487</td>
                             <td>496</td>
                             <td>500</td>
                             <td>220</td>
                             <td>140</td>
                         </tr>
                          <tr>
                             <td>16:00</td>
                             <td>125</td>
                             <td>487</td>
                             <td>451</td>
                             <td>310</td>
                             <td>340</td>
                         </tr>
                         <tr>
                             <td>17:00</td>
                             <td>400</td>
                             <td>357</td>
                             <td>541</td>
                             <td>234</td>
                             <td>340</td>
                         </tr>
                          <tr>
                             <td>18:00</td>
                             <td>572</td>
                             <td>570</td>
                             <td>400</td>
                             <td>340</td>
                             <td>330</td>
                         </tr>
                         <tr>
                             <td>19:00</td>
                             <td>210</td>
                             <td>600</td>
                             <td>200</td>
                             <td>450</td>
                             <td>450</td>
                         </tr>
                          <tr>
                             <td>20:00</td>
                             <td>0</td>
                             <td>500</td>
                             <td>300</td>
                             <td>100</td>
                             <td>20</td>
                         </tr>
                          <tr>
                              <td>21:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>22:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>23:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>24:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>1:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>2:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>3:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>4:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>5:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                          <tr>
                              <td>6:00</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                              <td>0</td>
                          </tr>
                     </tbody>
                 </table>
                </div>
            </div>
        </div>
        <!--阴极铜表面缺陷数据-->
        <div class="cbox">
            <div class="cbox-title"><span>阴极铜表面缺陷数据</span></div>
            <div class="cbox-con defect">
                 <table class="">
                     <thead>
                         <th width="65">序号</th>
                         <th>车间名称</th>
                         <th colspan="2">铜外观YES/NG</th>
                     </thead>
                     <tbody>
                         <tr>
                             <td width="65">1</td>
                             <td>奥炉车间</td>
                             <td>1970</td>
                             <td>10</td>
                         </tr>
                         <tr>
                             <td width="65">2</td>
                             <td>双闪车间</td>
                             <td>4450</td>
                             <td>50</td>
                         </tr>
                         <tr>
                             <td width="65">3</td>
                             <td>XX车间</td>
                             <td>3200</td>
                             <td>30</td>
                         </tr>
                         <tr>
                             <td width="65">4</td>
                             <td>XX车间</td>
                             <td>3800</td>
                             <td>20</td>
                         </tr>
                         <tr>
                             <td width="65">5</td>
                             <td>XX车间</td>
                             <td>4000</td>
                             <td>35</td>
                         </tr>
                         <tr>
                             <td width="65">6</td>
                             <td>XX车间</td>
                             <td>0</td>
                             <td>0</td>
                         </tr>
                         <tr>
                             <td width="65">7</td>
                             <td>XX车间</td>
                             <td>0</td>
                             <td>0</td>
                         </tr>
                         <tr>
                             <td width="65">8</td>
                             <td>XX车间</td>
                             <td>4000</td>
                             <td>35</td>
                         </tr>
                         <tr>
                             <td width="65">9</td>
                             <td>XX车间</td>
                             <td>0</td>
                             <td>0</td>
                         </tr>
                         <tr>
                             <td width="65">10</td>
                             <td>XX车间</td>
                             <td>0</td>
                             <td>0</td>
                         </tr>
                     </tbody>
                 </table>
            </div>
        </div>
    </div>
</div>
<!--动态检测数据-->
<div class="box-bottom">
    <div class="cbox">
        <div class="cbox-title"><span>动态检测数据</span></div>
        <div class="cbox-con">
            <div class="kbox h252" id="container3"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    // 百度LBS
    var map = new BMapGL.Map('container');
    var point = new BMapGL.Point(117.782393,30.933811);
    map.centerAndZoom(point, 5);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    createMaker('金隆铜业有限公司',117.782393,30.933811,120);
    createMaker('盛屯金属有限公司',118.237792,24.650749,5641);
    createMaker('广西南国铜业有限公司',107.816722,22.540277,0);
    createMaker('赤峰金通铜业有限公司',119.139474,42.258663,0);
    createMaker('张家港联合铜业有限公司',120.707229,31.95687,0);
    createMaker('青海铜业有限公司',101.504264,36.598169,0);
    createMaker('黑龙江紫金铜业有限公司',123.585691,47.189473,0);
    createMaker('江苏庆峰工程集团有限公司',119.447043,32.471629,0);

    let apiURL='http://60.191.72.227:8081';
    let userId='';


    $.get(apiURL+'/product/getAllProductCounts?userId=2106267426FB76RP',function(data,status){
        //var ssq=$("#yjbtjtable");
        //$("#yjbtjtable")[0].innerHTML=data.data;
        //console.log(data.data);
        //2022-10-09：把假数据改为真数据
        //个人吐槽：get请求。。。。userid写死。。。返回的是html。。。。。
        $("#t_yjbtj")[0].innerHTML=data.data;

    });



    function createMaker(com,lng,lat,num,uncodeNum){
        var point = new BMapGL.Point(lng,lat);
        var marker = new BMapGL.Marker(point);
        map.addOverlay(marker);
        var opts = {
            width: 1,
            height: 1,
            title: com
        };
        //2022-10-09：地图中冶炼厂的内容    内容错误，重新修改展示格式
        var infoWindow = new BMapGL.InfoWindow('合计阴极板数：'+(Number(num)+Number(uncodeNum))+'<br>' +
            '有编码：'+num+'  无编码：'+uncodeNum, opts);
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point); // 开启信息窗口
        });
    }

//截止当前铜产量（万吨）
// let name1 = ["奥炉车间", "双闪车间", "XX车间", "XX车间", "XX车间"];
// let value1 = [15, 30, 25, 20, 10];
let name1 = ["奥炉车间", "双闪车间", "XX车间", "XX车间", "XX车间", "双闪车间", "XX车间", "XX车间", "XX车间", "双闪车间", "XX车间", "XX车间", "XX车间", "双闪车间", "XX车间", "XX车间", "XX车间"];
let value1 = [15, 30, 25, 20, 10, 30, 25, 20, 10, 30, 25, 20, 10, 30, 25, 20, 10];
option = {
    title: {
        text: '截止当前铜产量（万吨）',
        textStyle: {
            align: 'center',
            color: '#3ddeff',
            fontSize: 16,
        },
        top: '2%',
        left: 'center',
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
        backgroundColor: 'rgba(9, 24, 48, 0.5)',
        borderColor: 'rgba(75, 253, 238, 0.4)',
        textStyle: {
            color: '#CFE3FC',
        },
        borderWidth: 1,
    },
    grid: {
        top: '25%',
        right: '5%',
        left: "10%",
        bottom: '12%',
    },


    // dataZoom 组件 用于区域缩放
    dataZoom: [
        {
            type: 'slider',
            show: true, // 设置 dataZoom-inside 组件控制的 x轴
            // 数据窗口范围的起始和结束百分比  范围: 0 ~ 100
            start: 0,
            end: 20,
            xAxisIndex: [0],
            filterMode: 'empty',
            bottom: -25
        }
    ],


    xAxis: [{
        //name: "车间",
        type: 'category',
        data: name1,
        axisLabel: { 
            interval: 0, 
            textStyle: {
                color: '#3ddeff',
            },
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.15)',
            },
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },

    }],
    yAxis: [{
        //name: "产值（万吨）",
        axisLabel: {
            formatter: '{value}',
            color: '#3ddeff',
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.15)',
            },
        },
        axisLine: {
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.15)',
            },
        },
        axisTick: {
            show: false,
        },

    },
    {
        axisLine: {//右边竖线
            show: true,
            lineStyle: {
                color: 'rgba(255,255,255,0.15)',
            },
        },
    },
    ],
    series: [{
        type: 'bar',
        data: value1,
        barWidth: '30%',
        itemStyle: {
            normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0,244,255,1)' // 0% 处的颜色
                }, {
                    offset: 1,
                    color: 'rgba(0,77,167,1)' // 100% 处的颜色
                }], false),
                shadowColor: 'rgba(0,160,221,1)',
                shadowBlur: 4,
            }
        },
        label: {
            normal: {
                show: true,
                lineHeight: 10,
                formatter: '{c}',
                position: 'top',
                textStyle: {
                    color: '#00D6F9',
                    fontSize: 12
                }

            }
        }
    }]
};

var container1 = echarts.init(document.getElementById('container1'));
container1.setOption(option);
window.addEventListener('resize', function () {
    container1.resize()
})
$('.kbox').resize(function(){
    container1.resize();
});
    //机组剥片机
let name2 = ["奥炉车间", "双闪车间", "XX车间1", "XX车间2", "XX车间3"];
let label2 = ['7:00', '8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '0:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00'];
let value21 = [0, 250, 500, 550, 330, 485, 456, 248, 487, 125, 400, 300, 550, 400, 500, 550, 0, 0, 0, 0, 0, 0, 0, 0];
let value22 = [0, 248, 487, 125, 400, 300, 550, 400, 250, 500, 550, 330, 485, 456, 500, 550, 0, 0, 0, 0, 0, 0, 0, 0];
let value23 = [0, 200, 300, 330, 400, 500, 550, 400, 250, 300, 580, 400, 500, 600, 500, 300, 0, 0, 0, 0, 0, 0, 0, 0];
let value24 = [0, 300, 550, 400, 250, 500, 550, 200, 300, 330, 400, 500, 550, 200, 300, 330, 0, 0, 0, 0, 0, 0, 0, 0];
let value25 = [0, 580, 400, 500, 600, 500, 300, 200, 300, 330, 400, 500, 550, 400, 250, 300, 0, 0, 0, 0, 0, 0, 0, 0];
option = {
    tooltip: {
        trigger: "axis",
        axisPointer: {
            type: "shadow",
            label: {
                show: true
            }
        }
    },
    grid: {
      top: '28%',
      left: '0.4%',
      right: '1%',
      bottom: '6%',
      containLabel: true,
    },
    legend: {
        data: name2,
        top: "2%",
        left: '15%',
        right: '15%',
        itemGap: 15,
        itemWidth: 26,
        itemHeight: 10,
        textStyle: {
            color: "#3ddeff",
            fontSize: 13
        },
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        axisLabel: {
            show: true,//隐藏底部时间
            formatter: '{value}',
            fontSize: 12,
            margin: 10,
            interval: 0, 
            rotate: 90,
            textStyle: {
                color: '#3ddeff',
            },
        },
        splitLine: {
            lineStyle: {
                color: 'rgba(255,255,255,0.15)',
            },
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: true,
        },
        alignWithLabel:true,
        data: label2,
    },
    yAxis: [
        {
            boundaryGap: false,
            type: 'value',
            //name:'',
            //min: 0,
            max: 800,
            //interval: 20,
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#3ddeff',
                },
            },
           splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
           axisTick: {
            show: false,
           },
        },
        {
            axisLine: {//右边竖线
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
        },
    ],
    series: [
        {
            name: '奥炉车间',
            type: 'line',
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 5,
            zlevel: 2,
            itemStyle: {
                color: '#2bfaff',
                borderColor: '#2bfaff',
            },

            lineStyle: {
                normal: {
                    width: 2,
                    color: '#3ddeff',
                },
            },
            data: value21,
        },
        {
            name: '双闪车间',
            type: 'line',
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 5,
            zlevel: 2,
            itemStyle: {
                color: '#20ff9c',
                borderColor: '#20ff9c',
            },

            lineStyle: {
                normal: {
                    width: 2,
                    color: '#20ff9c',
                },
            },
            data: value22,
        },
        {
            name: 'XX车间1',
            type: 'line',
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 5,
            zlevel: 2,
            itemStyle: {
                color: '#ffc600',
                borderColor: '#ffc600',
            },

            lineStyle: {
                normal: {
                    width: 2,
                    color: '#ffc600',
                },
            },
            data: value23,
        },
        {
            name: 'XX车间2',
            type: 'line',
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 5,
            zlevel: 2,
            itemStyle: {
                color: '#fd6765',
                borderColor: '#fd6765',
            },

            lineStyle: {
                normal: {
                    width: 2,
                    color: '#fd6765',
                },
            },
            data: value24,
        },
        {
            name: 'XX车间3',
            type: 'line',
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 5,
            zlevel: 2,
            itemStyle: {
                color: '#01a0ea',
                borderColor: '#01a0ea',
            },

            lineStyle: {
                normal: {
                    width: 2,
                    color: '#01a0ea',
                },
            },
            data: value25,
        },
    ],
};

var container2 = echarts.init(document.getElementById('container2'));
container2.setOption(option);
window.addEventListener('resize', function () {
    container2.resize()
})
$('.kbox').resize(function(){
    container2.resize();
});
</script>
<script type="text/javascript">
//动态检测数据

$.get(apiURL+'/industryData/getAllLBarChart?userId=111',function(data,status){
    let name3=data.data.factoryNames;
    let value31=data.data.healthValues;
    let value32=data.data.subHealthValues;
    let value33=data.data.unHealthValues;

    option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            left: '2%',
            right: '4%',
            bottom: '14%',
            top: '16%',
            containLabel: true
        },
        legend: {
            data: ['健康', '亚健康', '不健康'],
            x: "center",
            top: 5,
            textStyle: {
                color: "#3ddeff",
                fontSize: 15,
            },
            itemWidth: 15,
            itemHeight: 15,
        },
        xAxis: {
            type: 'category',
            data: name3,
            axisLabel: {
                show: true,//隐藏底部时间
                fontSize: 12,
                margin: 10,
                textStyle: {
                    color: '#3ddeff',
                },
            },
            axisLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
            axisTick: {
                show: true,
            },
        },
        yAxis: {
            type: 'value',
            //max: '20000',
            axisLabel: {
                formatter: '{value}',
                textStyle: {
                    color: '#3ddeff',
                },
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.15)',
                },
            },
        },
        series: [{
            name: '健康',
            type: 'bar',
            barWidth: '25%',
            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#8bd46e'
                    }, {
                        offset: 1,
                        color: '#09bcb7'
                    }]),
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'top',
                    color: '#3ddeff',
                },
            },
            data: value31,
        },
            {
                name: '亚健康',
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#00f0fd'
                        }, {
                            offset: 1,
                            color: '#008fca'
                        }]),
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: '#3ddeff',
                    },
                },
                data: value32,
            },
            {
                name: '不健康',
                type: 'bar',
                barWidth: '25%',
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: '#fccb05'
                        }, {
                            offset: 1,
                            color: '#f5804d'
                        }]),
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        color: '#3ddeff',
                    },
                },
                data: value33,
            }]
    };
    var container3 = echarts.init(document.getElementById('container3'));
    container3.setOption(option);
    window.addEventListener('resize', function () {
        container3.resize()
    })
    $('.kbox').resize(function(){
        container3.resize();
    });
});




</script>
<!--此函数实现了在界面中实时显示时间的功能-->
<script type="text/javascript">
  function time() {
    function Appendzero (obj) {
        if (obj < 10) return "0" + obj; else return obj;
    }
    var vWeek, vWeek_s, vDay;
    vWeek = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
    var date =  new Date();
    year = date.getFullYear();
    month = date.getMonth() + 1;
    day = date.getDate();
    hours = date.getHours();
    minutes = date.getMinutes();
    seconds = date.getSeconds();
    vWeek_s = date.getDay();
      //document.getElementById("test5").innerHTML = year + "-" + month + "-" + day + "\t" + Appendzero (hours) + ":" + Appendzero (minutes) + ":" + Appendzero (seconds);
      //document.getElementById("time").innerHTML = Appendzero (hours) + ":" + Appendzero (minutes) + ":" + Appendzero (seconds);
      //2022/10/03:改用jQuery。
      //$("#test5").val(year + "-" + month + "-" + day);
      $("#time").html(Appendzero (hours) + ":" + Appendzero (minutes) + ":" + Appendzero (seconds));
  }
  setInterval("time()", 1000);
</script>
<script>
    //2022/10/03:想完全放弃layui
layui.use(['element', 'layer', 'util', 'laydate'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,laydate = layui.laydate
  ,$ = layui.$;

  //日期时间选择器
  laydate.render({
    elem: '#test5'
  });

});
</script>
</body>
</html>
